<template>
  <main>
    <Hero :title="title"/>
    <section class="contact-section">
      <div class="container">
        <div class="d-none d-sm-block mb-5 pb-4">
          <div id="map" style="height: 480px; position: relative; overflow: hidden;">
            <baidu-map style="height: 100%; width: 100%;" ak="8VKBgEIGsUbLVVZkpOXGYsgKIrzzcZiS" :center="center"
                       :zoom="zoom" @ready="handler">
            </baidu-map>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <h2 class="contact-title">邮 件</h2>
          </div>
          <div class="col-lg-8">
            <form class="form-contact contact_form" action="contact_process.php" method="post" id="contactForm"
                  novalidate="novalidate">
              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <textarea class="form-control w-100" name="message" id="message" cols="30" rows="9"
                              onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message'"
                              placeholder="留下您的建议"></textarea>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <input class="form-control valid" name="name" id="name" type="text" onfocus="this.placeholder = ''"
                           onblur="this.placeholder = 'Enter your name'" placeholder="姓名">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <input class="form-control valid" name="email" id="email" type="email"
                           onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'"
                           placeholder="邮编">
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group">
                    <input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''"
                           onblur="this.placeholder = 'Enter Subject'" placeholder="主题">
                  </div>
                </div>
              </div>
              <div class="form-group mt-3">
                <button type="submit" class="button button-contactForm boxed-btn">发 送</button>
              </div>
            </form>
          </div>
          <div class="col-lg-3 offset-lg-1">
            <div class="media contact-info">
              <span class="contact-info__icon"><i class="ti-home"></i></span>
              <div class="media-body">
                <h3>山西农业大学</h3>
                <p>山西省晋中市杨家庄村</p>
              </div>
            </div>
            <div class="media contact-info">
              <span class="contact-info__icon"><i class="ti-email"></i></span>
              <div class="media-body">
                <h3>3228314370@qq.com</h3>
                <p>欢迎私信打扰!</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import Hero from "../components/hero"
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  name: "contact",
  components: {
    Hero,
    BaiduMap
  },
  data() {
    return {
      title: '留 言',
      center: {lng: 0, lat: 0},
      zoom: 15
    }
  },
  methods: {
    handler({BMap, map}) {
      this.center.lng = 112.583804
      this.center.lat = 37.423954
    }
  }
}
</script>


<style scoped>
a:hover {
  text-decoration-line: none;
  cursor: pointer
}
</style>
